<template>
  <div class="br-layout-relative">
    <div class="br-layout-absolute br-border-bottom" style="height: 30px;line-height: 30px;">
      <span style="margin-left: 10px;">资源目录</span>
    </div>
    <div class="br-layout-absolute" style="top:31px;overflow: auto;">
      <ul id="directoryTree" class="ztree" v-loading="treeLoading"></ul>
    </div>
    <e-vue-contextmenu ref="setting-dialog" style="z-index: 9999;">
      <div class="br-operation" @click="add">
        <div class="icon"><i class="el-icon-circle-plus-outline"></i></div>
        <div class="text">新增</div>
      </div>
      <div class="br-operation" @click="rename">
        <div class="icon"><i class="el-icon-edit"></i></div>
        <div class="text">重命名</div>
      </div>
      <div class="br-operation" @click="remove">
        <div class="icon"><i class="el-icon-delete"></i></div>
        <div class="text">删除</div>
      </div>
    </e-vue-contextmenu>
  </div>
</template>

<script>
  import {
    tree,
    add,
    rename,
    remove,
    move
  } from '@/api/directory/directory'
  import {
    mapGetters
  } from 'vuex'
  export default {
    components: {},
    data() {
      return {
        searchword: "",
        treeLoading: false,
        treeNode: null,
        setting: {
          view: {
            showIcon: true,
            addHoverDom: this.addHoverDom,
            removeHoverDom: this.removeHoverDom,
          },
          data: {
            keep: {
              parent: true,
              leaf: false
            },
            simpleData: {
              enable: true,
              idKey: 'id',
              pIdKey: "pId",
            }
          },
          key: {
            children: 'children',
            isParent: "pId"
          },
          edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: false,
            showRenameBtn: false,
            drag: {
              isMove: true,
              prev: false,
              inner: true,
              next: false
            }
          },
          callback: {
            onRename: this.onRename,
            onClick: this.onClick,
            beforeDrag: this.beforeDrag,
            beforeDrop: this.beforeDrop
          }
        },
      }
    },
    computed: {
      ...mapGetters(["directory"]),
      directoryId() {
        return this.directory.id;
      }
    },
    methods: {
      addHoverDom(treeId, treeNode) {
        let that = this;
        var aObj = $("#" + treeNode.tId + "_a");
        if ($("#diyBtn_" + treeNode.id).length > 0) return;
        var editStr = "<span id='diyBtn_space_" + treeNode.id + "' > </span>" +
          "<i class='el-icon-setting' style='float:right;line-height: 21px;' id='diyBtn_" + treeNode.id + "'></i>";
        aObj.append(editStr);
        var btn = $("#diyBtn_" + treeNode.id);
        if (btn) btn.bind("click", function(e) {
          that.showMainMenu(e)
        });
      },
      removeHoverDom(treeId, treeNode) {
        $("#diyBtn_" + treeNode.id).unbind().remove();
        $("#diyBtn_space_" + treeNode.id).unbind().remove();
      },
      showMainMenu(e) {
        this.$refs['setting-dialog'].showMenu(e);
      },
      hoideMainMenu() {
        this.$refs['setting-dialog'].hideMenu();
      },
      onClick(event, treeId, treeNode) {
        this.treeNode = treeNode;
        this.$store.commit("DIRECTORY_ID", this.treeNode.id);
        const nodes = treeNode.getPath();
        let paths = [];
        for (let i = 0; i < nodes.length; i++) {
          paths.push(nodes[i].name);
        }
        this.$store.commit("DIRECTORY_NAME", paths.join(" / "));
      },
      beforeDrag(treeId, treeNodes) {
        this.treeNode = treeNodes[0];
      },
      beforeDrop(treeId, treeNodes, targetNode, moveType) {
        if (moveType !== 'inner') {
          return false;
        }
        let param = {
          id: this.treeNode.id,
          targetId: targetNode.id,
        };
        move(param).then(res => {
          if (res.data.status === 200) {} else {
            return false;
          }
        });
      },
      add() {
        this.hoideMainMenu();
        let params = {
          pId: this.treeNode.id,
        };
        add(params).then((res) => {
          if (res.data.status === 200) {
            let zTree = $.fn.zTree.getZTreeObj('directoryTree');
            let nodes = zTree.getSelectedNodes()[0];
            zTree.addNodes(nodes, 0, res.data.data);
            let newnode = zTree.getSelectedNodes()[0].children[0];
            zTree.selectNode(newnode, false, false);
            this.treeNode = newnode;
            zTree.editName(newnode);
          }
        })
      },
      rename() {
        this.hoideMainMenu();
        var zTree = $.fn.zTree.getZTreeObj('directoryTree'),
          treeNode = zTree.getSelectedNodes()[0];
        this.treeNodeName = treeNode.name;
        zTree.editName(treeNode);
      },
      remove() {
        this.hoideMainMenu();
        this.$confirm('是否删除此分类，请确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
          .then(_ => {
            remove(this.treeNode.id).then((res) => {
              if (res.data.status === 200) {
                var zTree = $.fn.zTree.getZTreeObj('directoryTree');
                var nodes = zTree.getSelectedNodes()[0];
                zTree.removeNode(nodes);
              }
            })
          })
          .catch(_ => {});
      },
      onRename(event, treeId, treeNode, isCancel) {
        var zTree = $.fn.zTree.getZTreeObj('directoryTree');
        let params = {
          id: treeNode.id,
          pId: treeNode.pId,
          name: treeNode.name,
        }
        rename(params).then((res) => {
          if (res.data.status !== 200) {
            zTree.editName(treeNode);
          }
        })
      },
      tree() {
        this.treeLoading = true
        tree().then((res) => {
          this.treeLoading = false;
          if (res.data.status === 200) {
            $.fn.zTree.init($('#directoryTree'), this.setting, res.data.data);
            if (this.directoryId) {
              let treeObj = $.fn.zTree.getZTreeObj('directoryTree');
              let tId = this.directoryId;
              let treeNode = treeObj.getNodeByParam('id', tId);
              if (treeNode != null) {
                treeObj.selectNode(treeNode, false, false);
                this.setting.callback.onClick(null, 'directoryTree', treeNode);
              }
            }
          }
        })
      },
    },
    created() {
      this.tree();
    },
    mounted() {}
  };
</script>

<style lang="less" scoped>
</style>
